<script setup>
import { ref } from 'vue'
import { fetchCityDate } from '../api/weatherAPI'
import { useCityStore } from '../stores/cityStore'

const city = ref('')
const cityStore = useCityStore()

function request() {
  if (city.value.trim()) {
    getDate(city.value)
  }
}

async function getDate(cityName) {
  const res = await fetchCityDate(cityName)
  cityStore.updateLocation(res.location[0])
}
</script>

<template>
  <div>
    <form @submit.prevent>
      <input
        class="shuru"
        type="search"
        placeholder="请输入城市名称"
        v-model="city"
        @keyup.enter="request"
      />
      <input class="queding" type="button" value="城市查询" @click="request" />
    </form>
  </div>
  <div>
    <span>预报城市：</span>
    <span>{{ cityStore.location.name }}</span>
  </div>
</template>
<style scoped>
div > span:nth-of-type(1) {
  font-size: 1.5rem;
}
div > span:nth-of-type(2) {
  font-size: 2.5rem;
}
input.shuru {
  height: 3rem;
  margin-right: 1rem;
  width: 14rem;
  font-size: 1.74rem;
}
input.queding {
  height: 3rem;
  width: 8.5rem;
  font-size: 1.74rem;
}
form {
  text-align: center;
}
</style>